import React, { Component } from 'react'
import PropTypes from 'prop-types'

import './banner.css'

/**
 * 轮播图容器
 */
export default class Banner extends Component {

    static defaultProps = {
        width: 700,
        height: 400,
        imgList: [],
        interval: 3000,
        duration: 500
    }

    /**
     * 轮播图的属性
     */
    static propTypes = {
        width: PropTypes.number.isRequired,
        height: PropTypes.number.isRequired,
        imgList: PropTypes.arrayOf(PropTypes.string).isRequired, // 图片列表
        interval: PropTypes.number.isRequired, // 自动切换时间间隔
        duration: PropTypes.number.isRequired, // 滑动动画时长
    }

    render() {
        return (
            <div className='banner-container' style={{
                width: this.props.width,
                height: this.props.height,
                backgroundImage: `url(${this.props.imgList[0]})`,
                backgroundSize: 'cover',

            }}>

            </div>
        )
    }
}
